<template>
  <div class="crop-page">
    <div class="search-box" id="search-box">
      <div class="search-card">
        <div class="input-box">
          <div class="searchCard">
            <span class="searchText">作物类型：</span>
            <el-input class="shadowInput" v-model="form.cropType" clearable size="mini"
              placeholder="请输入作物类型"></el-input>
          </div>
          <div class="searchCard">
            <span class="searchText">作物品种：</span>
            <el-input class="shadowInput" v-model="form.cropVarieties" clearable size="mini"
              placeholder="请输入作物品种"></el-input>
          </div>
        </div>
        <div class="button-box">
          <el-button class="search" @click="getList">搜索</el-button>
          <el-button class="clear" @click="handleReset">清除</el-button>
        </div>
        <svg-icon class="svg-icon arrow" id="arrow" icon-class="rightArrow" @click="toggleDropdown" />
      </div>
      <div class="input-box">
        <div class="searchCard">
          <span class="searchText">填报人：</span>
          <el-input class="shadowInput" v-model="form.createUser" clearable size="mini" placeholder="请输入填报人"></el-input>
        </div>
        <div class="searchCard">
          <span class="searchText">填报时间：</span>
          <el-date-picker v-model="timeList" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss"
            type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" size="mini"
            @change="handleFormData">
          </el-date-picker>
        </div>
      </div>
    </div>
    <el-divider></el-divider>
    <div class="operate-box">
      <div class="button-box">
        <el-button v-if="hasIdentifier('Cropcarieties.add')" class="addButton" type="primary" icon="el-icon-plus" size="mini"
          @click="handleShowAddDialog">新增</el-button>
        <el-popconfirm v-if="hasIdentifier('Cropcarieties.delete')" style="margin:0 10px;" confirm-button-text='确定'
          cancel-button-text='取消' icon="el-icon-info" icon-color="red" title="确定删除所勾选的数据吗？" @confirm="handleDel">
          <el-button slot="reference" type="danger" plain icon="el-icon-delete" size="mini">删除</el-button>
        </el-popconfirm>
        <el-button type="info" plain icon="el-icon-upload2" size="mini" @click="handleSelectAll">全选</el-button>
        <el-button v-if="hasIdentifier('Cropcarieties.import')" type="warning" plain icon="el-icon-download" size="mini"
          @click="handleExport">导出</el-button>
      </div>
      <el-tooltip class="item" effect="dark" content="刷新" placement="top">
        <el-button class="circleButtom" size="mini" icon="el-icon-refresh" circle @click="getList"></el-button>
      </el-tooltip>
    </div>
    <div class="table-box">
      <TableCom ref="tableCom" :tableHead="tableHead" :tableData="tableData" :tableOperate="tableOperate"
        :delList.sync="delList"></TableCom>
    </div>
    <div class="page-box">
      <PageCom :page="pageData.current" :size="pageData.size" :total="total" @handleSize="handleSize"
        @handleCurrent="handleCurrent"></PageCom>
    </div>
    <!-- 新增弹框 -->
    <AddPopu ref="addPopu" :showDialog.sync="showAddDialog" @handleRefresh="getList"></AddPopu>
  </div>
</template>

<script>
import { cropVarietiesTableApi, cropVarietiesDelApi, cropVarietiesImportApi } from '@/api/info'
import { fileExport } from '@/utils/methods'
import TableCom from '@/components/TableCom'
import PageCom from '@/components/PageCom'
import AddPopu from './dialog/AddPopu.vue'
import { mapGetters } from 'vuex';
export default {
  components: {
    TableCom,
    PageCom,
    AddPopu
  },
  data() {
    return {
      form: {
        cropType: '',
        cropVarieties: '',
        createUser: '',
        startTime: '',
        endTime: '',
      },
      pageData: {
        current: 1,
        size: 10
      },
      total: 0,
      tableHead: [{
        title: '作物类型',
        prop: 'cropType'
      }, {
        title: '作物品种',
        prop: 'cropVarieties'
      }, {
        title: '填报人',
        prop: 'createUser'
      }, {
        title: '填报时间',
        prop: 'createTime'
      }],
      tableData: [],
      tableOperate: [{
        title: '修改',
        handle: (row) => {
          this.$refs.addPopu.ruleForm = { ...row }
          this.$refs.addPopu.handleGetSelect()
          this.showAddDialog = true
        },
        flag: () => {
          return this.hasIdentifier('Cropcarieties.update')
        }
      }],
      isDropdownVisible: false,
      timeList: [],
      showAddDialog: false,
      delList: [],
    }
  },
  computed: {
    ...mapGetters(['hasIdentifier']), // 映射 getters
  },
  methods: {
    // 显示隐藏下拉框
    toggleDropdown() {
      const arrow = document.getElementById('arrow');
      const search = document.getElementById('search-box');
      if (!this.isDropdownVisible) {
        arrow.classList.add('down');
        search.classList.add('search-box-height');
      } else {
        arrow.classList.remove('down');
        search.classList.remove('search-box-height');
      }
      this.isDropdownVisible = !this.isDropdownVisible;
    },
    // 搜索框时间
    handleFormData() {
      if (this.timeList.length) {
        this.form.startTime = this.timeList[0]
        this.form.endTime = this.timeList[1]
      } else {
        this.form.startTime = ''
        this.form.endTime = ''
      }
    },
    // 全选取消全选
    handleSelectAll() {
      this.$refs.tableCom.toggleSelection(this.tableData)
    },
    // 重置
    handleReset() {
      this.form = {
        cropType: '',
        cropVarieties: '',
        createUser: '',
        startTime: '',
        endTime: '',
      }
      this.timeList = []
    },
    // 获取表格
    async getList() {
      const { data } = await cropVarietiesTableApi(this.form, this.pageData)
      this.total = data.total
      this.tableData = data.records
    },
    // 分页
    handleSize(size) {
      this.pageData.current = 1
      this.pageData.size = size
      this.getList()
    },
    handleCurrent(current) {
      this.pageData.current = current
      this.getList()
    },
    handleShowAddDialog() {
      this.$refs.addPopu.handleGetInfo()
      this.$refs.addPopu.handleGetSelect()
      this.showAddDialog = true
    },
    // 删除
    async handleDel() {
      await cropVarietiesDelApi(this.delList)
      this.getList()
    },
    // 导出
    async handleExport() {
      let res = await cropVarietiesImportApi({ ...this.form, ids: this.delList })
      fileExport(res, '作物品种')
    },
  },
  mounted() {
    this.getList()
  }
}
</script>

<style lang='scss' scoped>
.crop-page {
  width: 100%;
  height: 100%;

  .search-box {
    height: 40px;
    transition: height 0.3s ease;
    overflow: hidden;

    .search-card {
      width: 90%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      position: relative;

      .arrow {
        cursor: pointer;
        display: inline-block;
        position: absolute;
        right: -100px;
        font-size: 30px;
        transition: transform 0.3s ease;
      }

      .arrow.down {
        transform: rotate(90deg);
      }
    }

    .input-box {
      display: flex;
      align-items: center;
      margin-bottom: 15px;
      transition: height 0.2s ease-in-out;
    }
  }

  .search-box-height {
    height: 90px;
  }

  .operate-box {
    width: 100%;
    background-color: #f5f7fa;
    padding: 8px 5px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

}
</style>
